<template>
  <div class="errorpage" id="bgstar" ref="bgstar">
    <div class="dao" @click="gotopage('guide')">
      <van-circle
        v-model="currentRate"
        :rate="rate"
        :speed="20"
        :text="text"
        :stroke-width="60"
        size="160px"
        color="#f50"
        @click="gotopage('guide')"
      />
    </div>
    <img :src="pic" alt="" class="myimg" />
    <span
      v-for="(l, i) in spanNum"
      :key="i"
      class="spandot"
      :style="{
        top: l.y,
        left: l.x,
        animationDelay: l.rate + 's',
        transform: 'scale(' + l.scaler + ')',
        background: l.rgba,
      }"
    >
    </span>
  </div>
</template>

<script>
import pic from "@/assets/images/503.png";
export default {
  data() {
    return {
      // pic:require("@/assets/images/404.png"),
      pic,
      spanNum: [],
      currentRate: 0,
      rate: 100,
    };
  },
  computed: {
    text() {
      return "倒计时" + (5 - Math.floor(this.currentRate / 20)) + "s";
    },
  },
  watch: {
    currentRate(v) {
      if (v == 100) {
        this.$router.push({ name: "guide" });
      }
    },
  },
  methods: {
    spanInit() {
      var width = document.getElementById("bgstar").clientWidth;
      var height = this.$refs.bgstar.clientHeight;

      for (var i = 0; i < 520; i++) {
        // 随机位置
        var x = Math.floor(Math.random() * width);
        var y = Math.floor(Math.random() * height);

        // 随机概率
        var rate = Math.random() * 2.5;

        // 随机大小
        var scaler = Math.random() * 1.5;

        // 随机颜色
        var r = Math.floor(Math.random() * 255);
        var g = Math.floor(Math.random() * 255);
        var b = Math.floor(Math.random() * 255);
        var a = Math.random() * 1;

        this.spanNum.push({
          x: x + "px",
          y: y + "px",
          rate,
          scaler,
          rgba: `rgba(${r},${g},${b},${a})`,
        });
      }
    },
  },
  mounted() {
    this.spanInit();
  },
};
</script>



<style lang="scss" scoped>
.errorpage {
  width: 100%;
  height: 100%;
  background: #000;
  position: relative;
  .dao {
    position: absolute;
    top: 20px;
    right: 20px;
    ::v-deep .van-circle__text {
      color: #fff;
    }
  }
  .myimg {
    width: 270px;
    height: 270px;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    z-index: 10;
  }
  .spandot {
    position: absolute;
    z-index: 100;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    animation: flash 3s infinite alternate;
  }
  @keyframes flash {
    from {
      opacity: 0;
    }
    to {
      opacity: 0.5;
    }
  }
}
</style>
